<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 

  

    自定义指令总结:
        一:定义语法:
             (1).局部指令:
               new Vue({                               
                directuves: {指令名,配置对象} 或
               })
               new Vue({
                  directuves: {指令名:回调函数}
               })
             (2).全局指令:
              Vue.directuves(指令名,配置对象) 或 Vue. directuves:(指令名:回调函数)
        二 配置对象中常用的三个回调
             (1) bind:指令与元素成功绑定时调用(初次)
             (2) inserted: 指令所在元素被插入页面时调用
             (3) update:指令所在模版结构被重新解析时调用
        三:备注
              1.指令定义时不加v- 但使用是要加v-
              2.指令名如果是多个单词 要使用短横杠命名方式不要采取驼峰命名
              3.自定义指令内的this指向window
              5.函数式只有一个回调同等于对象式细分出来的 bind与update的结合。
              6.接收两个参数 (dom元素,要绑定的自定义指令)
              7.注意参数2内在本质是一个对象 里面有该绑定的自定义指令的基本信息包括它携带的值   

     -->


    <!-- 1.需求一:定义一个v-big指令  和v-text的功能类似 但会把绑定的数值放大十倍
         2.需求二:定义一个v-fbind指令 和v-bind的功能类似 但可以让其绑定的inout元素默认获取焦点 
     -->
    <div id="root">
        <h1 v-text="n">n的值是{{n}}</h1>
        <h1 v-big="n">n的放大十倍后的值是{{n}}</h1>
        <button @click="n++"> 点击按钮n++</button>
        <br>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        // 全局注册一个自定义指令(不同的Vue实例内都可使用 这应该都理解)
        // Vue.directive('fbind', {
        //     // 指令与元素成功绑定时(初次)
        //     bind(element, binding) {
        //         element.value = binding.value
        //     },
        //     // 指令所在元素被插入页面时
        //     inserted(element, binding) {
        //         element.focus()

        //     },
        //     // 指令所在的模版被重新解析时
        //     update(element, binding) {
        //         element.value = binding.value

        //     }
        // }
        // )


        new Vue({
            el: '#root',
            data: {
                n: 1
            },

            // 局部注册自定义指令
            directives: {
                // 自定义指令函数式_的调用的时机
                //1 指令与元素成功绑定时(初次) 
                //2 指令所在的模版被重新解析时 该函数会调用
                //3.接收两个参数 (dom元素,要绑定的自定义指令)
                //注意参数2自定义指令本质是一个配置对象 里面有该自定义指令的基本信息包括它携带的值
                big(element, binding) {
                    // 操作原生dom
                    element.innerText = binding.value * 10
                },
                //   函数式自定义指令有缺陷 调用的时间点没有 对象式的细
                // fbind(element,binding) {
                //     element.value = binding.value
                //     element.focus()
                // }

                // 自定义指令对象式_的调用的时机
                fbind: {
                    // 指令与元素成功绑定时(初次)
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus()

                    },
                    // 指令所在的模版被重新解析时
                    update(element, binding) {
                        element.value = binding.value

                    }
                }


            }
        })
    </script>
</body>

</html>